<template>
  <view class="container">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="知识共享" :background="background">
    </u-navbar>
    <view>
      <view class="container_title">
        <view class="container_header">
          <view class="container_header_tag row">
        <u-tag v-for="(item, index) in categoryType" :text="item.label" :type="index === tagIndex ? 'warning' : 'success'"
          @click="handleTagClick(index,item)" />
          </view>
        </view>
      </view>

      <view class="container_title">
        <view class="container_search">
          <view class="container_search_text">
            资料名称:
          </view>
          <u-search :clearabled="true" placeholder="请输入资料名称" :show-action="false" v-model="examName"></u-search>
        </view>

        <view class="container_choose">

          <view class="">
            <text class="container_choose_text">
              排序方式:
            </text>
            <u-radio-group v-model="chhooseType">
              <u-radio v-for="(item, index) in listTypeChoose" :key="index" :name="item.name" :disabled="item.disabled"
                size="10rpx" label-size="20rpx" active-color="#82B2FF"> {{item.name}}</u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="container_study_status">
          <text class="container_study_status_text"> 资料类型：</text>
          <u-radio-group v-model="status" @change="radioGroupChange">
            <u-radio active-color="#82B2FF" size="10rpx" label-size="20rpx" @change="radioChange"
              v-for="(item, index) in listStatus" :key="index" :name="item.name" :disabled="item.disabled">
              {{item.name}}
            </u-radio>
          </u-radio-group>

        </view>
      </view>




      <view class="container_score">

        <view class="container_score_item">
          <!--          <view class="container_score_item_1">
            <u-icon class="error-circle-fill" name="error-circle-fill"></u-icon>当前违规分数

            <view class="container_score_item_count">
              10分
            </view>

            <view class="container_score_item_text">
              违规程度 : <text class="container_score_item_tit">重大违规</text>
            </view>
          </view> -->

          <!-- <view class="container_score_item_2"> -->
          <!-- <view class="container_score_item_2_header"> -->
          <!--  <u-icon name="account-fill" class="account-fill"></u-icon>
              <view class="">
                我的考试
              </view>
              <u-button size="mini" type="warning" @click="showMyExam">查看</u-button> -->
          <!-- </view> -->
          <!--            <view class="container_score_item_2_count">
              <view class="">
                3
              </view>
              <view class="">
                1
              </view>
              <view class="">
                70
              </view>
            </view> -->
          <!-- <view class="container_score_item_2_count"> -->
          <!-- <view class="">
                考试次数
              </view>
              <view class="">
                合格次数
              </view>
              <view class="">
                平均分
              </view> -->
          <!-- </view> -->

          <!-- </view> -->
        </view>
        <view class="container_study">
          <!--       <view class="container_study_tab">
            <u-subsection bg-color="#D3E3FD" :list="listType" :currentType="1"></u-subsection>
          </view> -->

          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="文档" type="success" />
                <text class="container_study_card_type">重大违规类</text>
              </view>

              <view class="container_study_card_status">
                状态：未学习
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  变电安规及变电运维类学习视频名称-1
                </view>
                <view class="container_study_card_item">
                  <view class="container_study_card_type">
                    上传时间：2024-05-23
                  </view>
                  <view class="container_study_card_type">
                    观看人
                  </view>
                </view>
              </view>
              <view class="" @click="handleStudy">
                <u-icon name="play-circle" class="play-circle"></u-icon>

              </view>
            </view>

          </view>
          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="视频" type="success" />
                <text class="container_study_card_type">重大违规类</text>
              </view>

              <view class="container_study_card_status">
                状态：未学习
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  变电安规及变电运维类学习视频名称-1
                </view>
                <view class="container_study_card_item">
                  <view class="container_study_card_type">
                    上传时间：2024-05-23
                  </view>
                  <view class="container_study_card_type">
                    观看人
                  </view>
                </view>
              </view>
              <view class="" @click="handleStudyVideo">
                <u-icon name="play-circle" class="play-circle"></u-icon>

              </view>
            </view>

          </view>
          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="视频" type="success" />
                <text class="container_study_card_type">重大违规类</text>
              </view>

              <view class="container_study_card_status">
                状态：未学习
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  变电安规及变电运维类学习视频名称-1
                </view>
                <view class="container_study_card_item">
                  <view class="container_study_card_type">
                    上传时间：2024-05-23
                  </view>
                  <view class="container_study_card_type">
                    观看人
                  </view>
                </view>
              </view>
              <view class="">
                <u-icon name="play-circle" class="play-circle"></u-icon>

              </view>
            </view>

          </view>
          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="视频" type="success" />
                <text class="container_study_card_type">重大违规类</text>
              </view>

              <view class="container_study_card_status">
                状态：未学习
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  变电安规及变电运维类学习视频名称-1
                </view>
                <view class="container_study_card_item">
                  <view class="container_study_card_type">
                    上传时间：2024-05-23
                  </view>
                  <view class="container_study_card_type">
                    观看人
                  </view>
                </view>
              </view>
              <view class="">
                <u-icon name="play-circle" class="play-circle"></u-icon>

              </view>
            </view>

          </view>
          <view class="container_study_card">
            <view class="container_study_card_title">
              <view>
                <u-tag size="mini" class="container_study_card_text" text="视频" type="success" />
                <text class="container_study_card_type">重大违规类</text>
              </view>

              <view class="container_study_card_status">
                状态：未学习
              </view>
            </view>

            <view class="container_study_card_name">
              <view class="container_study_card_name_1">
                <view class="">
                  变电安规及变电运维类学习视频名称-1
                </view>
                <view class="container_study_card_item">
                  <view class="container_study_card_type">
                    上传时间：2024-05-23
                  </view>
                  <view class="container_study_card_type">
                    观看人
                  </view>
                </view>
              </view>
              <view class="" @click="handleStudy">
                <u-icon name="play-circle" class="play-circle"></u-icon>
              </view>
            </view>

          </view>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store/modules/user.js';
  
  export default {
    data() {
      return {
        tagType: '竞赛学习',
        examName: "",
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        chhooseType: '',
        listTypeChoose: [{
            name: '按照上传时间',
            disabled: false
          },
          {
            name: '按照观看人次',
            disabled: false
          },
        ],
        tagIndex:0,
        listStatus: [{
            name: '全部',
            disabled: false
          },
          {
            name: '视频',
            disabled: false
          },
          {
            name: '文件',
            disabled: false
          }
        ],
        // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
        status: '',
        listType: [{
            name: '重大违规类'
          },
          {
            name: '中度违规'
          },
          {
            name: '一般违规'
          }
        ],
        currentType: 1,
        tagList: [{
            value: 1,
            label: '全部类',
            type: 'success'
          },
          {
            value: 2,
            label: '竞赛类',
            type: 'success'
          },
          {
            value: 3,
            label: '案例类',
            type: 'success'
          },
          {
            value: 4,
            label: '主题类',
            type: 'success'
          },
          {
            value: 5,
            label: '安规类',
            type: 'success'
          },
          {
            value: 6,
            label: '专业类',
            type: 'warning'
          },
          {
            value: 7,
            label: '政治类',
            type: 'success'
          },
          {
            value: 8,
            label: '其他类',
            type: 'success'
          }
        ],
      };
    },
    created() {
      this.$store.dispatch('getCategoryType')
    },
    computed: {
      categoryType() {
        return  store.state.categoryType
      }
    },
    methods: {
      backIndex() {
      uni.navigateback();
    },
    handleTagClick(index,item) {
        this.tagIndex = index;
        this.tagType = item.label
      },
      showMyExam() {
        uni.navigateTo({
          url: '../myexam/myexam'
        })

      },
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
        // console.log(e);
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      },
      handleStudy() {
        uni.navigateTo({
          url: '../study-item/study-item'
        })
      },
      handleStudyVideo() {
        uni.navigateTo({
          url: '../study-video-item/study-video-item'
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: aliceblue;
    margin-bottom: 20rpx;
    height: 100vh;
    overflow-y: scroll;

    .container_title {
      margin: 20rpx;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 20rpx;

      .container_header {
        .container_header_tag {
          display: flex;
          flex-wrap: wrap;
          // justify-content: space-evenly;
          align-items: center;
          text-align: center;

          .u-tag {
            width: 140rpx;
            margin: 5px;
            /* 根据需要调整间距 */
          }
        }

      }

    }

    .container_title {
      .container_search {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .container_search_text {
          margin-right: 20rpx;
          font-size: 25rpx;
        }
      }

      .container_choose {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        margin-top: 20rpx;
        font-size: 25rpx;

        .container_choose_text {
          margin-right: 20rpx;
        }


      }

      .container_study_status {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx 0;
        // margin-top: 40rpx;

        .container_study_status_text {
          font-size: 25rpx;
          
        }

      }
    }

    .container_score {
      text-align: center;

      .container_score_item {
        display: flex;
        justify-content: space-between;
        border-radius: 20rpx;

        .container_score_item_1 {
          margin: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          width: 300rpx;
          background-color: #fff;
          margin-right: 20rpx;

          .error-circle-fill {
            margin-right: 20rpx;
            font-size: 35rpx
          }

          .container_score_item_count {
            font-weight: 700;
            color: red;
            margin-top: 20rpx;
            font-size: 35rpx
          }

          .container_score_item_text {
            margin-top: 20rpx;

            .container_score_item_tit {
              color: red;
              margin-left: 20rpx;
            }
          }
        }

        .container_score_item_2 {
          margin: 20rpx;
          padding: 20rpx;
          border-radius: 20rpx;
          flex: 1;
          background-color: #fff;

          .container_score_item_2_header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .account-fill {
              font-size: 35rpx;
              margin-right: 20rpx;
            }
          }

          .container_score_item_2_count {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            margin-top: 30rpx;
            // padding: 0 20rpx;
          }
        }
      }

      .container_study {
        margin: 20rpx;

        .container_study_tab {
          margin-top: 20rpx;
        }



        .container_study_card {
          background-color: #fff;
          margin-top: 20rpx;
          border-radius: 20rpx;
          padding: 20rpx;

          .container_study_card_title {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .container_study_card_text {
              margin-right: 20rpx;
            }

            .container_study_card_type {
              font-size: 22rpx;
              color: darkgray;
            }

            .container_study_card_status {
              color: red;
            }
          }

          .container_study_card_name {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .container_study_card_name_1 {
              width: 60%;
              margin-top: 20rpx;
              text-align-last: left;

              .container_study_card_item {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .container_study_card_type {
                  font-size: 22rpx;
                  color: darkgray;
                  text-align-last: left;
                  margin-top: 20rpx;
                }
              }

            }

            .play-circle {
              font-size: 50rpx;
              color: #A0CFFF;
            }
          }

        }
      }
    }
  }
</style>